<template>
    <el-dialog
        v-model="componentUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="componentForm" :rules="componentRules" ref="componentFormRef">
                <el-form-item label="组件名称-英文" label-width="20%" prop="componentName">
                    <el-input v-model="componentForm.componentName" placeholder="组件名称-英文" clearable />
                </el-form-item>
                <el-form-item label="组件名称-中文" label-width="20%" prop="componentCnName">
                    <el-input v-model="componentForm.componentCnName" placeholder="组件名称-中文" clearable />
                </el-form-item>
                <el-form-item label="组件内容" label-width="20%" prop="componentTemplate">
                    <el-input type="textarea" v-model="componentForm.componentTemplate" placeholder="组件内容" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="组件数据" label-width="20%" prop="componentData">
                    <el-input type="textarea" v-model="componentForm.componentData" placeholder="组件数据" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="计算属性" label-width="20%" prop="componentComputed">
                    <el-input type="textarea" v-model="componentForm.componentComputed" placeholder="计算属性" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="组件参数" label-width="20%" prop="componentJson">
                    <el-input type="textarea" v-model="componentForm.componentJson" placeholder="组件参数" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="组件类型" label-width="20%" prop="componentType">
                    <el-select v-model="componentForm.componentType" clearable placeholder="组件类型" style="width: 100%">
                        <el-option value="ICON" label="图标组件"></el-option>
                        <el-option value="COMMON" label="通用组件"></el-option>
                        <el-option value="CUSTOM" label="自定义组件"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {
    componentInfoCreate,
    componentInfoQueryNoContent,
    componentInfoUpdate
} from "@/request/components";
import {ElNotification} from "element-plus";

export default {
    name: "ComponentUpdateDialog",
    props: ['title', 'componentForm'],
    data() {
        return {
            componentRules: {
                componentName: [{ required: true, message: '组件名称-英文不能为空', trigger: 'blur' }],
                componentCnName: [{ required: true, message: '组件名称-中文不能为空', trigger: 'blur' }],
                componentType: [{ required: true, message: '组件类型不能为空', trigger: 'blur' }]
            },
            saveLoading: false
        }
    },
    methods: {
        cancelDialog() {
            this.$store.state.componentUpdateDialogVisible = false;
        },
        refreshData() {
            componentInfoQueryNoContent(this.componentSearchData).then(res => {
                this.$store.state.componentDataList = res.data;
            })
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['componentFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if (this.componentForm.id === "") {
                        // 添加组件
                        componentInfoCreate(this.componentForm).then(res => {
                            ElNotification({
                                title: 'Success',
                                message: res.message,
                                type: 'success'
                            });
                            this.refreshData();
                            this.$store.state.componentUpdateDialogVisible = false;
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 修改组件
                        componentInfoUpdate(this.componentForm).then(res => {
                            ElNotification({
                                title: 'Success',
                                message: res.message,
                                type: 'success'
                            });
                            this.refreshData();
                            this.$store.state.componentUpdateDialogVisible = false;
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                }
            })
        }
    },
    computed: {
        componentUpdateDialogVisible() {
            return this.$store.state.componentUpdateDialogVisible;
        },
        componentSearchData() {
            return this.$store.state.componentSearchData;
        }
    }
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>